<template>
  <div class="login">
    <div class="login-box">
      <!-- 登录 -->
      <div
        class="left-box"
        :style="{
          opacity: leftBoxOpacity,
        }"
      >
        <div class="login-inner">
          <el-form
            :model="loginInfo"
            :rules="logRules"
            ref="loginInfo"
            class="login-contain"
          >
            <h2>登 录</h2>
            <el-form-item class="login-input-group" prop="username">
              <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="loginInfo.username"
              >
              </el-input>
            </el-form-item>

            <el-form-item prop="password" class="login-input-group">
              <el-input
                type="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="loginInfo.password"
              >
              </el-input>
            </el-form-item>

            <el-button
              style="
                width: 100%;
                font-size: 16px;
                color: #fff;
                background-color: #444;
              "
              @click="login('loginInfo')"
              >登录</el-button
            >

            <div class="login-else">
              <a>忘记密码?</a>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 注册 -->
      <div
        class="right-box"
        :style="{
          opacity: rightBoxOpacity,
        }"
      >
        <div class="login-inner">
          <div class="login-contain">
            <h2>注 册</h2>

            <el-steps :active="active" simple style="margin-top: 30px">
              <el-step title="基本信息" icon="el-icon-edit"></el-step>
              <el-step title="邮箱验证" icon="el-icon-upload"></el-step>
            </el-steps>

            <!-- 基本信息表单 -->
            <el-form
              :model="registerInfo"
              :rules="regRules"
              ref="registerInfo"
              class="register-info"
              v-if="active === 0"
            >
              <el-form-item prop="username" class="login-input-group">
                <el-input
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user"
                  v-model="registerInfo.username"
                >
                </el-input>
              </el-form-item>

              <el-form-item prop="password" class="login-input-group">
                <el-input
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  v-model="registerInfo.password"
                >
                </el-input>
              </el-form-item>

              <el-form-item prop="confirmPassword" class="login-input-group">
                <el-input
                  type="password"
                  placeholder="请再次输入密码"
                  prefix-icon="el-icon-lock"
                  v-model="registerInfo.confirmPassword"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="
                    width: 100%;
                    font-size: 16px;
                    color: #fff;
                    background-color: #444;
                  "
                  @click="next('registerInfo')"
                  >下一步</el-button
                >
              </el-form-item>
            </el-form>

            <!-- 邮箱验证表单 -->
            <el-form
              :model="emailInfo"
              :rules="regRules"
              ref="emailInfo"
              class="register-info"
              v-if="active === 1"
            >
              <el-form-item prop="email" class="login-input-group">
                <el-input
                  placeholder="请输入邮箱"
                  prefix-icon="el-icon-user"
                  v-model="emailInfo.email"
                >
                </el-input>
              </el-form-item>

              <el-form-item prop="code" class="login-input-group">
                <el-input
                  placeholder="请输入验证码"
                  prefix-icon="el-icon-lock"
                  v-model="emailInfo.code"
                >
                  <el-button
                    ref="getCodeBtn"
                    :disabled="disabledBtn"
                    slot="append"
                    @click="getCode"
                    >{{ code }}</el-button
                  >
                </el-input>
              </el-form-item>

              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  width: 100%;
                "
              >
                <el-button
                  style="
                    width: 45%;
                    font-size: 16px;
                    color: #fff;
                    background-color: #444;
                  "
                  @click="active--"
                  >上一步</el-button
                >
                <el-button
                  style="
                    width: 45%;
                    font-size: 16px;
                    color: #fff;
                    background-color: #444;
                  "
                  @click="register('emailInfo')"
                  >注 册</el-button
                >
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 遮罩 -->
      <div
        id="login-mask"
        class="login-mask"
        :style="{
          right: right,
        }"
      >
        <div class="login-mask-inner">
          <div
            class="account-mask"
            :style="{
              display: noAccountMask,
            }"
          >
            <h2 style="font-size: 30px; color: #fff">还没有账号?</h2>
            <p style="margin: 20px 0px; font-size: 18px; color: #fff">
              赶快加入我们吧!
            </p>
            <el-button
              style="
                width: 100px;
                font-size: 16px;
                color: #fff;
                background-color: transparent;
              "
              @click="goToReg"
              >注册</el-button
            >
          </div>

          <div
            class="account-mask"
            :style="{
              display: haveAccountMask,
            }"
          >
            <h2 style="font-size: 30px; color: #fff">已经有账号了?</h2>
            <p style="margin: 20px 0px; font-size: 18px; color: #fff">
              赶快登录探索吧!
            </p>
            <el-button
              style="
                width: 100px;
                font-size: 16px;
                color: #fff;
                background-color: transparent;
              "
              @click="goToLog"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: function () {
    const checkUsername = (rule, value, callback) => {
      this.axios
        .get(`api/${value}`)
        .then((response) => {
          // console.log(this);
          if (!response.data.data) {
            return callback(new Error(response.data.msg));
          }

          // 允许发送验证码
          this.disabledBtn = false;
          callback();
        })
        .catch((err) => {
          console.log(err);
          callback();
        });
    };

    const checkPassword = (rule, value, callback) => {
      if (value !== this.registerInfo.password) {
        return callback(new Error("两次输入密码不一致!"));
      }

      callback();
    };

    return {
      active: 0,
      code: "Code",

      loginInfo: {
        username: "",
        password: "",
      },
      registerInfo: {
        username: "",
        password: "",
        confirmPassword: "",
      },
      emailInfo: {
        email: "",
        code: "",
      },

      // 样式
      right: "0",
      rightBoxDisplay: "none",
      leftBoxDisplay: "",
      noAccountMask: "",
      haveAccountMask: "none",
      leftBoxOpacity: 1,
      rightBoxOpacity: 0,
      disabledBtn: true,

      // 表单验证规则
      regRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
          { validator: checkUsername, trigger: ["blur", "change"] },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: checkPassword, trigger: ["blur", "change"] },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
          { validator: checkUsername, trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },

      logRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    goToReg() {
      this.right = "50%";
      this.noAccountMask = "none";
      this.haveAccountMask = "";
      this.leftBoxDisplay = "none";
      this.rightBoxDisplay = "";
      this.leftBoxOpacity = 0;
      this.rightBoxOpacity = 1;
    },

    goToLog() {
      this.right = "0";
      this.noAccountMask = "";
      this.haveAccountMask = "none";
      this.leftBoxDisplay = "";
      this.rightBoxDisplay = "none";
      this.leftBoxOpacity = 1;
      this.rightBoxOpacity = 0;
    },

    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(`api/login`, {
              username: this.loginInfo.username,
              password: this.loginInfo.password,
            })
            .then((response) => {
              if (response.data.status == 200) {
                window.localStorage.token = response.data.token;
                this.$router.push({ path: "/home" });
              } else {
                this.$notify.error({
                  title: "失败",
                  message: response.data.msg,
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },

    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          return false;
        }
      });
    },

    // 获取验证码
    getCode() {
      if (!this.emailInfo.email) {
        return this.$notify.error({
          title: "错误",
          message: "请输入邮箱",
        });
      }

      this.axios
        .get(`api/email?email=${this.emailInfo.email}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.code = 60;
            var that = this;
            var mytime = setInterval(function () {
              that.code--;
              if (that.code === 0) {
                clearInterval(mytime);
                that.code = "Code";
                that.disabledBtn = false;
              } else {
                that.disabledBtn = true; //按键不可用
              }
            }, 1000);
          } else {
            console.log(response.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 注册请求
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(`api/register`, {
              username: this.registerInfo.username,
              password: this.registerInfo.password,
              confirmPassword: this.registerInfo.confirmPassword,
              email: this.emailInfo.email,
              code: this.emailInfo.code,
            })
            .then((response) => {
              if (response.data.status == 200) {
                // console.log(response.data);
                this.$notify.success({
                  title: "成功",
                  message: "注册成功,请登录！",
                });

                this.registerInfo = {
                  username: "",
                  password: "",
                  confirmPassword: "",
                };

                this.emailInfo = {
                  email: "",
                  code: "",
                };
              } else {
                // console.log(response.data.msg);
                this.$notify.error({
                  title: "失败",
                  message: response.data.msg,
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/zxtkzldra.jpg");
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center;

  .el-input__inner:focus {
    outline: red;
  }

  .login-box {
    position: relative;
    width: 800px;
    height: 520px;
    margin: auto;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #ece2f7;

    .left-box,
    .right-box,
    .login-mask {
      position: absolute;
      width: 50%;
      height: 100%;
      padding: 18px;

      transition: all 0.8s;
      -webkit-transition: all 0.8s; /* Safari */
    }

    .left-box,
    .right-box {
      .login-inner {
        display: flex;
        width: 100%;
        height: 100%;

        .login-contain {
          width: 90%;
          margin: auto;

          h2 {
            font-size: 32px;
            font-weight: 520;
            text-align: center;
          }

          .login-input-group {
            height: 40px;
            line-height: 40px;
            margin: 30px 0;
          }

          .login-else {
            margin-top: 10px;
            text-align: center;
          }
        }
      }
    }

    .left-box {
      left: 0;
    }

    .right-box {
      right: 0;
      //  opacity: 0;
    }

    .login-mask {
      background-image: url("../../assets/img/zxtkzldra.jpg");
      background-repeat: no-repeat;
      background-position: 88% 20%;
      background-clip: content-box;
      border-radius: 30px;
      opacity: 0.6;

      .login-mask-inner {
        position: relative;
        width: 100%;
        height: 100%;

        .account-mask {
          position: absolute;
          top: 35%;
          width: 90%;
          margin-left: 5%;
          text-align: center;
        }
      }
    }
  }
}
</style>